<% content_for :title do %>
  <%= "Styleguide" %>
<% end %>

<% content_for(:toolbar) do %>
  <%= render Alchemy::Admin::ToolbarButton.new(
    icon: :info,
    label: 'Info',
    url: alchemy.dashboard_info_path,
    title: 'Info',
    hotkey: 'alt+i',
    dialog_options: {
      title: 'Info',
      size: "430x400"
    },
    if_permitted_to: [:index, :alchemy_admin_styleguide]
  ) %>
<% end %>

<h1>AlchemyCMS Styleguide</h1>

<h2>Forms</h2>

<div class="panel">
  <%= render_message do %>
    <p>This form is inside a <code>.panel</code> component.</p>
  <% end %>

  <form class="simple_form alchemy" action="#" accept-charset="UTF-8" method="post">
    <div class="input select">
      <label class="select control-label" for="select">Select</label>
      <select class="select" id="select" is="alchemy-select">
        <option value="">Please choose</option>
        <option value="1">Option 1</option>
        <option selected="selected" value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </div>

    <div class="input select">
      <label class="select control-label" for="select">Disabled Select</label>
      <select class="select" id="disabled-select" is="alchemy-select" disabled>
        <option value="">Cannot choose</option>
      </select>
    </div>

    <div class="input">
      <label class="control-label" for="datetime_picker">Date Time Picker</label>
      <alchemy-datepicker input-type="datetime">
        <input type="text" id="datetime_picker">
      </alchemy-datepicker>
    </div>

    <div class="input">
      <label class="control-label">Date & Time Pickers</label>
      <div class="control_group">
        <div class="input-row">
          <div class="input-column">
            <alchemy-datepicker input-type="date">
              <input type="text" id="date_picker">
            </alchemy-datepicker>
          </div>
          <div class="input-column">
            <alchemy-datepicker input-type="time">
              <input type="text" id="time_picker">
            </alchemy-datepicker>
          </div>
        </div>
      </div>
    </div>

    <div class="input">
      <label class="control-label" for="optional_string">String</label>
      <input type="text" id="optional_string">
    </div>
    <div class="input required">
      <label class="required control-label" for="required_string">
        Required String<abbr title="required">*</abbr>
      </label>
      <input type="text" id="required_string">
    </div>
    <div class="input field_with_errors">
      <label class="control-label" for="string_with_error">String with error</label>
      <input type="text" id="string_with_error">
      <small class="error">Error message</small>
    </div>
    <alchemy-char-counter max-chars="60">
      <div class="input">
        <label class="control-label" for="string_with_counter">String with char counter</label>
        <input type="text" id="string_with_counter">
      </div>
    </alchemy-char-counter>

    <div class="input check_boxes">
      <label class="control-label">Check Boxes</label>
      <div class="control_group">
        <label class="checkbox">
          <input type="checkbox" value="1" checked="checked">
          Checked
        </label>
        <label class="checkbox">
          <input type="checkbox" value="1">
          Unchecked
        </label>
      </div>
    </div>
    <alchemy-char-counter max-chars="160">
      <div class="input text">
        <label class="text control-label" for="textarea_with_counter">Textarea with char counter</label>
        <textarea class="text" id="textarea_with_counter"></textarea>
      </div>
    </alchemy-char-counter>
    <div class="input text">
      <label class="text control-label" for="textarea">Textarea</label>
      <textarea class="text" id="textarea"></textarea>
      <small class="hint">With hint and a <a href="/admin/styleguide">link</a> inside.</small>
    </div>

    <div class="input text tinymce_container">
      <label class="text control-label" for="tinymce_1">Richtext editor</label>
      <alchemy-tinymce>
        <textarea class="text" id="tinymce_1"></textarea>
      </alchemy-tinymce>
    </div>

    <div class="submit">
      <button class="secondary">Secondary</button>
      <button type="submit" is="alchemy-button">Primary Submit</button>
    </div>
  </form>
</div>

<h2>Buttons</h2>

<p>
  <button class="secondary" disabled>Disabled Secondary</button>
  <button type="submit" is="alchemy-button" disabled>Disabled Primary</button>
</p>

<h2>Selects</h2>

<div style="display: flex; gap: 1em;">
  <div style="width: 20%">
    <h3>Select with Search</h3>
    <select is="alchemy-select" class="full_width">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
      <option value="7">Option 7</option>
    </select>
  </div>

  <div style="width: 20%">
    <h3>Page Select</h3>
    <%= render Alchemy::Admin::PageSelect.new do %>
      <input name="page" class="full_width" />
    <% end %>
  </div>

  <div style="width: 20%">
    <h3>Element Select</h3>
    <%= render Alchemy::Admin::ElementSelect.new(Alchemy::Element.definitions) %>
  </div>

  <div style="width: 20%">
    <h3>Node Select</h3>
    <%= render Alchemy::Admin::NodeSelect.new do %>
      <input name="node" class="full_width" />
    <% end %>
  </div>

  <div style="width: 20%">
    <h3>Attachment Select</h3>
    <%= render Alchemy::Admin::AttachmentSelect.new do %>
      <input name="attachment" class="full_width" />
    <% end %>
  </div>
</div>

<h3>Tags Autocomplete</h3>

<div style="width: 25%">
  <alchemy-tags-autocomplete>
    <input type="text" class="full_width" />
  </alchemy-tags-autocomplete>
</div>

<h2>Typography</h2>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

<p>This is a paragraph, with <a href="#">a link</a>, a <kbd>keyboard shortcut</kbd> and an <code>inline code snippet</code>.</p>

<h2>Messages</h2>

<h3>Info Message</h3>

<%= render_message do %>
  <p>Lorem ipsum <strong>dolor</strong> sit amet, <a href="">consectetur</a> adipiscing elit.</p>
<% end %>

<h3>Warning Message</h3>

<%= render_message :warning do %>
  <p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipiscing elit.</p>
<% end %>

<h3>Error Message</h3>

<%= render_message :error do %>
  <p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipiscing elit.</p>
<% end %>

<h3>Growl Messages</h3>

<%= link_to render_icon(:check), 'javascript:Alchemy.growl("Success message")', class: "icon_button" %>
<%= link_to render_icon(:info), 'javascript:Alchemy.growl("Info message", "info")', class: "icon_button" %>
<%= link_to render_icon(:alert), 'javascript:Alchemy.growl("Warning message", "warn")', class: "icon_button" %>
<%= link_to render_icon(:bug), 'javascript:Alchemy.growl("Error message", "error")', class: "icon_button" %>

<h2>Dialog Links</h2>

<sl-tooltip content="Open in Dialog">
  <a
    href="/admin/styleguide"
    is="alchemy-dialog-link"
    class="icon_button"
    data-dialog-options="{&quot;size&quot;:&quot;800x600&quot;,&quot;title&quot;:&quot;Styleguide in Dialog&quot;}"
  >
    <%= render_icon "window" %>
  </a>
</sl-tooltip>
<a
  href="#"
  is="alchemy-dialog-link"
  class="icon_button disabled"
>
  <%= render_icon "window" %>
</a>

<h2>Tables</h2>

<h3>Normal Table</h3>

<table class="list">
  <tr>
    <th>Table Heading 1</th>
    <th>Table Heading 2</th>
    <th>Table Heading 3</th>
  </tr>
  <tr class="even">
    <td>Even table cell 1</td>
    <td>Even table cell 2</td>
    <td>Even table cell 3</td>
  </tr>
  <tr class="odd">
    <td>Odd table cell 1</td>
    <td>Odd table cell 2</td>
    <td>Odd table cell 3</td>
  </tr>
</table>

<h3>Table with icons</h3>

<table class="list">
  <tr>
    <th class="icon"></th>
    <th>Table Heading 1</th>
    <th>Table Heading 2</th>
    <th>Table Heading 3</th>
    <th class="tools"></th>
  </tr>
  <tr class="even">
    <td class="icon">
      <%= render_icon "user" %>
    </td>
    <td>Even table cell 1</td>
    <td>Even table cell 2</td>
    <td>Even table cell 3</td>
    <td class="tools">
      <a href="#" class="icon_button">
        <%= render_icon "delete-bin-2" %>
      </a>
      <a href="#" class="icon_button">
        <%= render_icon "edit" %>
      </a>
    </td>
  </tr>
  <tr class="odd">
    <td class="icon">
      <%= render_icon "user", style: "fill" %>
    </td>
    <td>Odd table cell 1</td>
    <td>Odd table cell 2</td>
    <td>Odd table cell 3</td>
    <td class="tools">
      <a href="#" class="icon_button">
        <%= render_icon "delete-bin-2" %>
      </a>
      <a href="#" class="icon_button">
        <%= render_icon "edit" %>
      </a>
    </td>
  </tr>
</table>

<h2>Lists</h2>

<h3>Unordered List</h3>

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<h3>Ordered List</h3>

<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>
